<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>添加分类</h2>
        </div>

        <div class='u-content mn flex flex-column flex-center'>
            <div class='item'>
                <label for="">分类标题</label>
                <el-input class='f-w250' v-model="phone" placeholder="手机号"></el-input>
            </div>
            <div class='item'>
                <label for="">分类图标</label>
                <div class='f-w250'>
                    <div class='u-upload'>
                        <input type="file" name="file" id="file" accept="image/png, image/jpeg, image/gif, image/jpg" class="u-upload-file" /> 
                        <label for="file" class='btn btn-success'>上传图标</label>
                    </div>
                    <p class='upload-tip'>只能上传jpg/png格式文件，文件不能超过50kb</p>
                </div>
            </div>
            <div class='item'>
                <label for="">分类图标</label>
                <div class='f-w250'>
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:3000/api/admin/uploadImg"
                        :show-file-list="false"
                        :headers="{
                            'Content-Type': 'multipart/form-data' 
                        }"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class='upload-tip'>只能上传jpg/png格式文件，文件不能超过50kb</p>
                </div>
            </div>
            <div class='item'>
                <label for="">分类备注</label>
                <el-input class='f-w250' v-model="phone" placeholder="分类备注"></el-input>
            </div>
            <div class='btn-box f-ptp20'>
                <el-button
                    class='f-w250 s-bg-green s-cfff'
                    @click="handleEdit(scope.$index, scope.row)">编 辑</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'AddClassify',
  data() {
    return {
      imageUrl: '',
      phone: '',
      password: '',
      myHeader: {
        // 'Content-Type': 'application/x-www-form-urlencoded'  
        'Content-Type': 'multipart/form-data' 
      }
    }
  },
  computed: {
    // myHeader() {
    //   return {
    //     'Content-Type': 'application/x-www-form-urlencoded',
    //     Authorization: 'dasdfasfgdsfdsf'
    //   }
    // }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    upload(file) {
      const _this = this;
    //   const params = new URLSearchParams();
    //   params.append('phone', this.phone);
    //   params.append('name', this.name);
    //   params.append('departmentId', this.departmentId);
    //   params.append('password', this.password);
    //   params.append('rePassword', this.rePassword);
      var formData = new FormData();  
      formData.append("file", file);
      formData.append("userData", 123123123);  
      this.$axios.post(`${this.GLOBAL.baseUrl}/api/admin/uploadImg`, formData, {
        headers: {
        //   'Content-Type': 'application/x-www-form-urlencoded',
          'Content-Type': 'multiple/form-data'
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.returnCode === 200) {
        
          _this.$message({
            message: '恭喜你，上传成功！',
            type: 'success'
          });
        //   this.$router.push('/home/organizationalStructure');
        //   _this.getList();
        } else {
          _this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    beforeAvatarUpload(file) {
      console.log('file:::', file);
      this.upload(file);  
    //   const isJPG = file.type === 'image/jpeg';
    //   const isPNG = file.type === 'image/png';
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG || !isPNG) {
    //     this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return (isJPG || isPNG) && isLt2M;
      return false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.avatar-uploader{
    border: 1px dashed #d9d9d9;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 100;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.upload-tip{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 24px;
}

.container{
  width: 560px;
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 80px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.btn-box{
    padding-left: 80px;
}
</style>
